<template>
    <div>
        <wd-navbar
        style="
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 9999;
  "
        title="限时秒杀" left-text="" left-arrow @click="backpath">
            <template #right>
              <wd-icon name="search" size="18" />
            </template>
          </wd-navbar>
    </div>
    <div>
      <view class="wraper">
        <wd-sidebar v-model="active" @change="handleChange">
          <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" />
        </wd-sidebar>
        <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
          <view v-for="(item, index) in categories" :key="index" class="category" style="margin-left: -20rpx;">
            <wd-cell-group :title="item.title" border >
              <wd-cell v-for="(i, index) in item.items" :key="index" :title="i.title" :label="i.label">

                    <div class="item_main">
                      <div class="img_src">
                        <img :src="i.img" alt="" style="width: 100%; height: 100%;" />
                      </div>
                      <div class="shop_con">
                        <div class="" style="width: 90%; color: gray; ">
                          {{i.name}}
                        </div>
                        <div>
                          <button
                            style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>
          
                        </div>
                        <div>
                          <button
                            style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
                        </div>
                        <div style="display: flex; justify-content: space-between; width: 95%;">
                          <div>
                            <span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
                            <span
                              style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
                          </div>
                          <div>
                            <wd-button type="error" size="small">加入购物车</wd-button>
                          </div>
                        </div>
                      </div>
                    </div>





                <!-- <wd-icon name="github-filled" size="24px"></wd-icon> -->
              </wd-cell>
            </wd-cell-group>
          </view>
        </scroll-view>
      </view>
    </div>
    <div>
      <BottomShopCar />
    </div>
</template>

<script setup lang="ts">
import BottomShopCar from '../../../../components/BottonShopCar.vue';
import { onMounted, ref } from 'vue';
import { getRect, isArray } from '../../../../node_modules/wot-design-uni/components/common/util';
import {storeToRefs} from 'pinia';
import { useMainStore } from '@/store/index.ts';
const mainStore = useMainStore()
const { list } = storeToRefs(mainStore)
const active = ref<number>(0)
const scrollTop = ref<number>(0)
const itemScrollTop = ref<number[]>([])



const categories = ref([
  {
    label: '18:00开始',
    title: '18:00开始',
    items: list.value.slice(0, 5)
  },
  {
    label: '20:00开始',
    title: '20:00开始',
    items: list.value.slice(5, 10)
  },
  {
    label: '22:00开始',
    title: '22:00开始',
    items: list.value.slice(10,15)
  },
  {
    label: '24:00开始',
    title: '24:00开始',
    items: list.value.slice(15, 20)
  },
  {
    label: '00:00开始',
    title: '00:00开始',
    items:list.value.slice(20, 25)
  },
  {
    label: '02:00开始',
    title: '02:00开始',
    items: list.value.slice(25, 30)
  },
  {
    label: '04:00开始',
    title: '04:00开始',
    items: list.value.slice(35, 40)
  }
])

const backpath=()=>{
  uni.navigateBack({
    delta: 1
  })
}

onMounted(() => {
  getRect('.category', true).then((rects) => {
    if (isArray(rects)) {
      itemScrollTop.value = rects.map((item) => item.top || 0)
      scrollTop.value = rects[active.value].top || 0
    }
  })
})

function handleChange({ value }) {
  active.value = value
  scrollTop.value = itemScrollTop.value[value]
}
function onScroll(e) {
  const { scrollTop } = e.detail
  // console.log(scrollTop);
  
  const threshold = 400 // 下一个标题与顶部的距离
  if (scrollTop < threshold) {
    active.value = 0
    return
  }
  const index = itemScrollTop.value.findIndex((top) => top > scrollTop && top - scrollTop <= threshold)
  if (index > -1) {
    active.value = index
  }
}
</script>

<style scoped lang="scss">
.wraper {
  margin-left: -20rpx;
  width: 100%;
  display: flex;
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}

.content {
  flex: 1;
  
  background: #fff;
}
  .item_main {
    width: 100%;
    height: 300rpx;
   margin-left: 0 auto;

    background-color: white;
    display: flex;
    justify-content: space-around;

    .img_src {
      width: 30%;
      height: 90%;

      margin: auto;
    }

    .shop_con {
      width: 65%;
      height: 90%;
      margin: auto;

    }
  }
  


.item_main{
  width: 60vw !important;
}
.wd-cell-group[data-v-0cbdf28c]{
  padding-top: 0rpx !important;
  margin-top: 10rpx !important;
}
.wd-sidebar-item--active[data-v-9c9938af],.wd-sidebar-item--suffix[data-v-9c9938af],.wd-sidebar-item[data-v-9c9938af]{
  padding: 0rpx !important;
}
.wd-sidebar-item--active[data-v-9c9938af][data-v-8e9dc02e], .wd-sidebar-item--suffix[data-v-9c9938af][data-v-8e9dc02e], .wd-sidebar-item[data-v-9c9938af][data-v-8e9dc02e]{
  padding: 10rpx !important;
}

</style>